<template>
<div>
  <div class="mat-title-pane">
    <span class="mat-title poem" @click="onTitle">
      {{ mat.title }}
    </span>
    <span class="author">
      <a :href="'/#/people/view/' + mat.author">{{ mat.author }}</a>
    </span>
    <span class="mat-stats">
      <star :star="star"></star>
    </span>
    <span class="mat-toolbar">
        <ri i="brush" @click="showWrite"></ri>
        <ri i="sound" @click="showSound"></ri>
        <ri i="note"></ri>
        <ri i="quote"></ri>
        <ri i="translate"></ri>
    </span>
  </div>
  <div class="mat-content">
      <mat-content :mat="mat" :content="mat.content" @select="$emit('select', $event)"></mat-content>
  </div>
</div>
</template>

<script>
import Star from "@tools/Star.vue";
import MatContent from "../content/MatContent.vue";
export default {
  props: ["mat"],
  components: {
    Star,
    MatContent
  },
  data() {
    return {
      star: {}
    }
  },
  methods: {
    onTitle() {
      this.$emit('click-title');
    },
    showSound() {
      console.log("show sound");
    },
    showWrite() {

    }
  }
}
</script>